<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>商品规格</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>

    <style type="text/css">
        body {
            font-size: 14px;

        }

        .tips {
            font-size: 12px;
            color: #a2a2a2;
        }

        /*商品规格选择，有带勾号的*/
        .format {
            padding: 0 10px;
        }

        .format li:after {
            border-radius: 5px;
        }

        .format li.active {
            color: #327afa;
        }

        .format li.active:after {
            border-color: #327afa;
        }

        .format li.active:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-right: 22px solid #327afa;
            border-top: 15px solid transparent;
            bottom: 0;
            right: 0;
        }

        .format li {
            width: 30%;
            float: left;
            text-align: center;
            border-radius: 8px;
            padding: 5px 0;
            margin-bottom: 12px;
        }

        .format li i {
            display: none;
        }

        .format li.active i {
            display: block;
        }

        .format li:nth-of-type(3n+2), .format li:nth-of-type(3n+1) {
            margin-right: 5%;
        }

        .format .aui-iconfont {
            position: absolute;
            color: #fff !important;
            right: -15px;
            bottom: -8px;
            font-size: 12px !important;
        }

        .addAttr {
            padding: 0 10px;
        }

        .addAttr li {
            width: 30%;
            float: left;
            text-align: center;
            border-radius: 8px;
            padding: 5px 0;
        }

        .aui-icon-add {
            color: #000 !important;
        }

        .addMark {
            margin-right: 5px;
        }

        /*自定义可以删除的*/
        .deleIcon:before {
            content: "-";
            color: #fff;
            position: absolute;
            right: -3px;
            top: -5px;
            font-weight: bolder;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #327afa;
            font-size: 18px;
            line-height: 16px;
            text-align: center;
            z-index: 9;
        }

        .customAttr {

        }

        li.customAttr {
            color: #327afa;
        }

        li.customAttr:after {
            border-color: #327afa;
        }

        .pickerToTop {
            position: absolute;
            bottom: 0;
            /*-webkit-transform: translateY(100%);*/
            /*height:50%;*/
            /*overflow-y:auto; */
            /*-webkit-transition:  .5s;
            transition:  .5s;*/
            z-index: 999;
            width: 100%;
            display: none;
        }

        .toTopAnimate {
            display: block;
        }

        .cancel {
            background: #d7e5ff !important;
            border-color: #d7e5ff !important;
            color: #327afa !important;
            width: 50%;
            float: left;
        }

        .confirm {
            width: 50%;
            float: left;
        }
        .aui-ellipsis-1{
            padding: 0;
            display: block;
        }
    </style>
</head>
<body>
<div class="contain">
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">

            请选择颜色<span class="tips">（必填，最多选20项）</span>
        </li>
        <li class="aui-list-view-cell">
            <ul class="format colorFormat">
                <li class="aui-border active " tapmode onclick="changeCheck(this)">
                    <i class="aui-iconfont aui-icon-check"></i><span class="aui-ellipsis-1">红色</span>
                </li>
                <!--<li class="aui-border" tapmode onclick="changeCheck(this)">-->
                <!--<i class="aui-iconfont aui-icon-check"></i>白色-->
                <!--</li>-->
                <!--<li class="aui-border" tapmode onclick="changeCheck(this)">-->
                <!--<i class="aui-iconfont aui-icon-check"></i>蓝色-->
                <!--</li>-->
                <!--</li>-->
                <!--<li class="aui-border" tapmode onclick="changeCheck(this)">-->
                <!--<i class="aui-iconfont aui-icon-check"></i>绿色-->
                <!--</li>-->
                <!--<li class="aui-border customAttr">-->
                <!--<span class="deleIcon"  tapmode onclick="deleAttr(this)"></span>红色</li>-->
                <!--</li> -->
            </ul>
            <ul class="addAttr addColor">
                <li class="aui-border  " data-type="color" onclick="showPicker('color')">
                    <span class="addMark">+</span>自定义
                </li>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="aui-list-view">
        <li class="aui-list-view-cell">

            请选择尺寸<span class="tips">（必填，最多选20项）</span>
        </li>
        <li class="aui-list-view-cell">
            <ul class="format sizeFormat">
                <li class="aui-border active  " tapmode onclick="changeCheck(this)">
                    <i class="aui-iconfont aui-icon-check"></i><em class="aui-ellipsis-1">S</em>
                </li>
                <!--<li class="aui-border" tapmode onclick="changeCheck(this)">-->
                <!--<i class="aui-iconfont aui-icon-check"></i><em>M</em>-->
                <!--</li>-->
                <!--<li class="aui-border" tapmode onclick="changeCheck(this)">-->
                <!--<i class="aui-iconfont aui-icon-check"></i><em>L</em></li>-->
                <!--</li>-->

                <!--<li class="aui-border customAttr">-->
                <!--<span class="deleIcon"   tapmode onclick="deleAttr(this)"></span>XXL</li>-->
                <!--</li>    -->
            </ul>
            <ul class="addAttr addSize">
                <li class="aui-border " data-type="color" onclick="showPicker('size')">
                    <span class="addMark">+</span>自定义
                </li>
                </li>
            </ul>
        </li>
    </ul>
</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/myInfo.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/echo.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript">
    var UIInput, inputId, inputValue;
    var firstH,//记录第一次自定义时候的高度，因为弹出键盘时候body高度变化了
        proCount = 0,//商品数量
        addType,//要添加的类型
        colors = "", sizes = "", sizesID = "";//颜色和大小属性json
    var beforeColors="",beforeSizes="";//在选择了规格后，再次进来，显示上次选择的规格
    apiready = function () {
        api.parseTapmode();
        UIInput = api.require('UIInput');
        var goodsId = api.pageParam.goodsId;
        beforeColors = api.pageParam.colors;
        beforeSizes = api.pageParam.sizes;
//        if (goodsId) {
//            //存在表示是修改
//            $(".sizeFormat").html("");
//            $(".colorFormat").html("");
//            showData(goodsId);
//        }
        if(typeof(beforeColors)!='undefined'){
            initData();
        }
        api.addEventListener({
            name: 'addReleaseFormat'
        }, function (ret, err) {
            if(ret && ret.value){
                setAttr(ret.value.releaseFormatValue)
            }
        });
    }
function initData() {
    var colorHtml = "";
    var sizeHtml = "";
    var ArrayBeforeSizes=toArray(beforeSizes,",");
    var ArrayBeforeColors=toArray(beforeColors,",");

    for(var i=0;i<ArrayBeforeColors.length;i++){
        colorHtml+= '<li class="aui-border customAttr  " ><span class="deleIcon"   tapmode onclick="deleAttr(this)"></span><em class="aui-ellipsis-1">';
        colorHtml += ArrayBeforeColors[i];
        colorHtml += '</em></li>';
    }
    $(".colorFormat").html(colorHtml);

    for(var i=0;i<ArrayBeforeSizes.length;i++){
        sizeHtml+= '<li class="aui-border customAttr  " ><span class="deleIcon"   tapmode onclick="deleAttr(this)"></span><em class="aui-ellipsis-1">';
        sizeHtml += ArrayBeforeSizes[i];
        sizeHtml += '</em></li>';
    }
    $(".sizeFormat").html(sizeHtml);


}
    //为了在下面的热门类别可以通用，单独出来
    function changeCheck(obj) {
        if ($(obj).hasClass("active")) {
            $(obj).removeClass("active");
        } else {
            $(obj).addClass("active");
        }
    }
    // 删除自定义的
    function deleAttr(obj) {
        $(obj).parent().remove();
    }
    // 显示遮罩
    function showPicker(type) {
        addType=type;
        api.openFrame({
            bgColor : 'rgba(0,0,0,0.3)',
            name:"popupInputPage",
            url:"../popupInputPage_frm.html",
            bounces : false,
            rect : {
                x : 0,
                y : 0,
                w : 'auto',
                h : 'auto'
            },
            pageParam:{
                type:addType,
                pageType:"releaseFormat"
            }
        });

    }
    // 设置属性
    function setAttr(addValue) {
        var html = '<li class="aui-border customAttr  " ><span class="deleIcon"   tapmode onclick="deleAttr(this)"></span><em class="aui-ellipsis-1">';
        html += addValue;
        html += '</em></li>';
        if (addType == "color") {
            if($(".colorFormat").find("li").length>19){
                api.toast({
                    msg:"颜色规格已超过20"
                })
            }else{
                $(".colorFormat").append(html);
            }

        } else {
            if($(".sizeFormat").find("li").length>19){
                api.toast({
                    msg:"颜色规格已超过20"
                })
            }else{
                $(".sizeFormat").append(html);
            }

        }
    }
    //接收来自win的sure方法
    function sure() {

        var hasColors = false, hasSize = false, colorLen = 0, sizeLen = 0;
        $(".colorFormat").find("li").each(function () {
            if ($(this).hasClass("active") || $(this).hasClass("customAttr")) {
                hasColors = true;
                colorLen++;
                colors += $(this).text().trim() + ",";
            }
        })

        $(".sizeFormat").find("li").each(function () {
            if ($(this).hasClass("active") || $(this).hasClass("customAttr")) {
                hasSize = true;
                sizeLen++;
                sizes += $(this).text().trim() + ",";
            }
        })
        if (hasColors && hasSize) {
//            proCount = parseInt(colorLen) * parseInt(sizeLen);
            //发送监听
            api.sendEvent({
                name: "releaseFormat",
                extra: {
                    colors: colors,
                    sizes: sizes
//                    proCount: proCount
                }
            })
            closeWin();
        } else if (!hasColors) {
            api.toast({
                msg: "请选择颜色！"
            })
        } else {
            api.toast({
                msg: "请选择尺寸！"
            })
        }
    }


    /*********************修改属性呢*******/
    function showData(goodId) {

        //获取产品规格分类
        showLoading();
        var data = {};
        var url = 'mall/spec/goodsId/' + goodId;
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                //spec1

                var colorData = ret.msg.cat;
                var sizeData = ret.msg.content;

                for (var i = 0; i < colorData.length; i++) {
                    $(".colorFormat").append('<li class="aui-border active" tapmode="" onclick="changeCheck(this)"> <i class="aui-iconfont aui-icon-check"></i>' + colorData[i]['spec1'] + '</li>');
                }
                for (var i = 0; i < sizeData.length; i++) {
                    $(".sizeFormat").append('<li class="aui-border active" data-id="' + sizeData[0][i]['id'] + '" tapmode="" onclick="changeCheck(this)"> <i class="aui-iconfont aui-icon-check"></i>' + sizeData[0][i]['spec2'] + '</li>');
                }

            } else {
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                });
            }
        });
        hideLoading();
    }
</script>
</html>